<template>
	<view>
		<view class="user-item">
			<image class="avatar" @click="jumpUser(postDetail.user_id)" mode="aspectFill" :src="postDetail.userInfo.avatar"></image>
			<text class="username">{{ postDetail.userInfo.nickname }}</text>
			<view class="btn" v-if="postDetail.is_follow" size="mini" @click="cancelFollow">已关注</view>
			<view class="btn" v-else size="mini" @click="follow">
				<u-icon name="plus"></u-icon>
				<text>关注</text>
			</view>
		</view>
		<view class="info-box">
			<!-- 轮播图 -->
			<block v-if="postDetail.type == 1 && postDetail.media.length > 0">
				<u-swiper @click="handelSwiper" :list="postDetail.media" radius="0" @change="(e) => (currentNum = e.current)" height="800rpx">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ postDetail.media.length }}</text>
					</view>
				</u-swiper>
			</block>
			<view class="post-content-wrap">
				<navigator class="discuss-item" :url="'/pages/discuss/detail?title=' + item" v-for="(item, index) in postDetail.discuss_list" :key="index">#{{ item }}#</navigator>
				<text @longpress="onCopy">{{ postDetail.content }}</text>
			</view>
			<!-- 圈子信息 -->
			<navigator v-if="postDetail.topicInfo" class="topic-info" :url="'/pages/topic/index?topic_id=' + postDetail.topic_id">
				<image mode="aspectFill" class="cover" :src="postDetail.topicInfo.cover_image"></image>
				<view class="center">
					<view class="desc">{{ postDetail.topicInfo.name.substring(0, 15) }}</view>
					<view class="count-txt">{{ postDetail.topicInfo.user_num }}人加圈 | {{ postDetail.topicInfo.post_num }}篇内容</view>
				</view>
				<view class="right">进圈子</view>
			</navigator>

			<view style="margin: 10rpx 30rpx; color: #616161; font-size: 28rpx">{{ postDetail.create_time | timeFrom }}</view>
		</view>

		<view style="color: #616161; font-size: 28rpx; padding: 20rpx">共 {{ postDetail.comment_num }} 条评论</view>
		<!-- 评论列表 -->
		<block v-for="(item, index) in commentList" :key="index">
			<view class="comment-item" @click="onChildrenCommentItem(item)">
				<image class="avatar-img" :src="$utils.imgPath(item.userInfo.avatar)"></image>
				<view class="comment-item_right">
					<view class="nickname">{{ item.userInfo.nickname }}</view>
					<view class="content">{{ item.content }}</view>
					<view class="time-desc">
						<text>{{ $u.timeFrom(item.create_time) }}</text>
					</view>
				</view>
				<view v-if="item.has_thumb" @click.stop="onThumbCancel(item)" class="thumb-wrap">
					<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
					<text v-if="item.thumb_num > 0">{{ item.thumb_num }}</text>
				</view>
				<view v-else @click.stop="onThumb(item)" class="thumb-wrap">
					<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
					<text v-if="item.thumb_num > 0">{{ item.thumb_num }}</text>
				</view>
			</view>
			<!-- 二级评论列表 -->
			<block v-if="item.children">
				<view class="comment-item children-comment-item" @click="onChildrenCommentItem(item)">
					<image class="avatar-img" :src="$utils.imgPath(item.children.userInfo.avatar)"></image>
					<view class="comment-item_right">
						<view class="nickname">
							<text>{{ item.children.userInfo.nickname }}</text>
							<text style="margin: 0 10rpx; font-size: 24rpx; color: #000">回复</text>
							<text>{{ item.children.replyUserInfo.nickname }}</text>
						</view>
						<view class="content">{{ item.children.content }}</view>
						<view class="time-desc">
							<text>{{ $u.timeFrom(item.create_time) }}</text>
						</view>
						<view class="collapse" style="margin-top: 10rpx" v-if="item.children.total > 1 && !item.childrenList" @click.stop="onCollapseComment(item)">
							展开{{ item.children.total - 1 }}条回复
						</view>
					</view>
					<view v-if="item.children.has_thumb" @click.stop="onThumb(item.children)" class="thumb-wrap">
						<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
						<text v-if="item.children.thumb_num > 0">{{ item.children.thumb_num }}</text>
					</view>
					<view v-else @click.stop="onThumb(item.children)" class="thumb-wrap">
						<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
						<text v-if="item.children.thumb_num > 0">{{ item.children.thumb_num }}</text>
					</view>
				</view>
			</block>
			<block v-if="item.childrenList">
				<view
					class="comment-item children-comment-item"
					v-for="(childrenItem, childrenIndex) in item.childrenList"
					:key="childrenItem.id"
					@click="onChildrenCommentItem(item)"
				>
					<image class="avatar-img" :src="$utils.imgPath(childrenItem.userInfo.avatar)"></image>
					<view class="comment-item_right">
						<view class="nickname">
							<text>{{ childrenItem.userInfo.nickname }}</text>
							<text style="margin: 0 10rpx; font-size: 24rpx; color: #000">回复</text>
							<text>{{ childrenItem.replyUserInfo.nickname }}</text>
						</view>
						<view class="content">{{ childrenItem.content }}</view>
						<view class="time-desc">
							<text>{{ $u.timeFrom(item.create_time) }}</text>
						</view>
					</view>
					<view v-if="childrenItem.has_thumb" @click.stop="onThumbCancel(childrenItem)" class="thumb-wrap">
						<wd-icon name="heart-filled" color="#fd3d4c" size="40rpx"></wd-icon>
						<text v-if="childrenItem.thumb_num > 0">{{ childrenItem.thumb_num }}</text>
					</view>
					<view v-else @click.stop="onThumb(childrenItem)" class="thumb-wrap">
						<wd-icon name="heart" color="#616161" size="40rpx"></wd-icon>
						<text v-if="childrenItem.thumb_num > 0">{{ childrenItem.thumb_num }}</text>
					</view>
				</view>
				<view v-if="item.hasMore" class="collapse" style="margin-left: 160rpx; padding: 20rpx 20rpx 20rpx 0" @click.stop="onMoreComment(item)">展开更多</view>
			</block>
		</block>
		<!-- 加载状态 -->
		<block v-if="commentList.length > 0">
			<view style="margin: 30rpx">
				<u-loadmore :status="loadStatus" />
			</view>
		</block>
		<block v-else>
			<u-empty text="暂无评论" mode="message" icon="/static/empty.png"></u-empty>
		</block>
		<!-- 评论输入框 -->
		<view style="height: 200rpx"></view>
		<view class="tool-wrap" :style="[toolStyle]">
			<block v-if="isShowCommentInput">
				<view class="input-wrap">
					<textarea
						class="comment-input"
						v-model="form.content"
						:maxlength="-1"
						confirm-type="send"
						:show-confirm-bar="false"
						auto-focus
						auto-height
						fixed
						:placeholder="placeholder"
						:adjust-position="false"
					/>
					<view style="display: flex">
						<view style="margin-left: auto; margin-top: 20rpx">
							<u-button @click="addComment" type="primary" text="发送" size="small"></u-button>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="input-tips" @click="isShowCommentInput = true">
					<wd-icon name="edit-1" size="24rpx"></wd-icon>
					<text class="ml10">说点什么...</text>
				</view>
				<!-- 点赞 -->
				<view v-if="postDetail.is_thumb" @click="onPostThumbCancel" class="num-wrap">
					<u-icon name="heart-fill" color="#fd3d4c" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.thumb_num }}</text>
				</view>
				<view v-else @click="onPostThumbAdd" class="num-wrap">
					<u-icon name="heart" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.thumb_num }}</text>
				</view>
				<!-- 收藏 -->
				<view v-if="postDetail.is_collect" @click="onPostCollectCancel" class="num-wrap">
					<u-icon name="star-filled" color="#fd3d4c" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.collect_num }}</text>
				</view>
				<view v-else class="num-wrap" @click="onPostCollectAdd">
					<u-icon name="star" size="54rpx"></u-icon>
					<text class="num">{{ postDetail.collect_num }}</text>
				</view>
				<!-- 分享 -->
				<view class="num-wrap" @click="showShare = true">
					<u-icon name="moments-circel-fill" color="#5ac725" size="54rpx"></u-icon>
				</view>
			</block>
		</view>
		<!-- 评论遮罩层 -->
		<u-overlay :show="isShowCommentInput" @click="isShowCommentInput = false" :zIndex="9"></u-overlay>
		<!-- 分享海报 -->
		<q-post-share @success="onPostShare" :coverImg="postDetail.media[0]" :contentText="postDetail.content" :qrCodeImg="qrCodeImg"></q-post-share>
		<!-- 海报弹窗 -->
		<u-popup :show="showSharePostImg" mode="center" width="80%" :round="10" :safeAreaInsetBottom="false" :closeOnClickOverlay="true" @close="showSharePostImg = false">
			<view>
				<image style="display: block" :src="sharePostImg" :show-menu-by-longpress="true" mode="widthFix"></image>
				<view style="color: #999; text-align: center; padding: 30rpx 0">长按保存图片</view>
			</view>
		</u-popup>
		<!-- 分享弹窗 -->
		<u-action-sheet
			:actions="shareList"
			:show="showShare"
			:round="10"
			cancelText="取消"
			:closeOnClickOverlay="true"
			@close="showShare = false"
			@select="onShareItem"
		></u-action-sheet>
		<!-- 悬浮按钮 -->
		<view class="fab-wrap">
			<navigator class="fab-item" open-type="switchTab" url="/pages/index/index">
				<text>返回</text>
				<text>首页</text>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showShare: false,
			shareList: [
				{
					key: 'wechat',
					name: '发给微信好友',
					openType: 'share'
				},
				{
					key: 'image',
					name: '分享海报'
				}
			],
			currentNum: 0,
			postId: 0,
			postDetail: {
				comment: [],
				media: [],
				comment_list: {
					data: []
				},
				userInfo: {
					avatar: ''
				}
			},
			focus: false,
			isSubmitD: false,
			commentList: [],
			placeholder: '说点什么...',
			form: {
				pid: 0,
				type: 1,
				to_uid: '',
				post_id: '',
				content: ''
			},
			page: 1,
			loadStatus: 'loadmore',
			discussList: [],
			sharePostImg: '',
			qrCodeImg: '',
			showSharePostImg: false,
			isShowCommentInput: false,
			toolStyle: {}
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.postId = options.id;

		if (options.scene) {
			this.postId = options.scene;
		}

		this.form.post_id = this.postId;
		this.getPostDetail();
		this.getCommentList();

		//#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		//#endif

		this.getQrCode();
		this.onKeyboardChange();
	},
	onReachBottom() {
		this.page++;
		this.getCommentList();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		let imgURL;
		if (this.postDetail.media.length > 0) {
			imgURL = this.postDetail.media[0];
		}
		return {
			title: this.postDetail.content,
			path: '/pages/post/detail?id=' + this.postId,
			imageUrl: imgURL
		};
	},
	onShareTimeline() {
		let imgURL = (imgURL = this.postDetail.media[0]);
		return {
			title: this.postDetail.content,
			imageUrl: imgURL,
			query: 'id=' + this.postId
		};
	},
	methods: {
		onShareItem(e) {
			let key = e.key;
			if (key == 'image') {
				this.showSharePostImg = true;
			}
		},
		getQrCode() {
			this.$H
				.get('post/qrCode', {
					post_id: this.postId
				})
				.then((res) => {
					if (res.code == 1) {
						this.qrCodeImg = res.result.url;
					}
				});
		},
		onPostShare(val) {
			this.sharePostImg = val;
		},
		handelSwiper(index) {
			uni.previewImage({
				current: index, // 当前显示图片的http链接
				urls: this.postDetail.media // 需要预览的图片http链接列表
			});
		},
		// 删除评论
		delComment(e, index, index2) {
			let that = this;

			if (e.user_id != this.userInfo.id) {
				return;
			}

			uni.showModal({
				title: '提示',
				content: '确定删除该评论？',
				success: function (res) {
					if (res.confirm) {
						that.$H
							.post('comment/del', {
								id: e.id
							})
							.then((res2) => {
								if (res2.code == 1) {
									if (index2 || index2 === 0) {
										that.commentList[index].children.splice(index2, 1);
									} else {
										that.commentList.splice(index, 1);
									}
								}
							});
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		onCopy() {
			let that = this;
			uni.setClipboardData({
				data: this.postDetail.content,
				success: function () {
					uni.showToast({
						title: '复制成功'
					});
				}
			});
		},
		// 评论点赞
		onThumb(id, index, index2) {
			this.$H
				.post('comment/thumbAdd', {
					id: id
				})
				.then((res) => {
					if (res.code == 1) {
						if (index2 || index2 == 0) {
							this.commentList[index].children[index2].is_thumb = true;
							this.commentList[index].children[index2].thumb_num++;
						} else {
							this.commentList[index].is_thumb = true;
							this.commentList[index].thumb_num++;
						}
					}
				});
		},
		// 评论取消点赞
		cancelThumb(id, index, index2) {
			this.$H
				.post('comment/cancelThumb', {
					id: id
				})
				.then((res) => {
					if (res.code == 1) {
						if (index2 || index2 == 0) {
							this.commentList[index].children[index2].is_thumb = false;
							this.commentList[index].children[index2].thumb_num--;
						} else {
							this.commentList[index].is_thumb = false;
							this.commentList[index].thumb_num--;
						}
					}
				});
		},
		// 回复评论
		onChildrenCommentItem(row) {
			this.isShowCommentInput = true;
			this.placeholder = '回复：' + row.userInfo.nickname;
			this.form.pid = row.id;
			this.form.reply_user_id = row.user_id;
		},
		// 输入框失去焦点时
		onBlur() {
			this.placeholder = '说点什么...';
			this.focus = false;
			this.form.pid = 0;
		},
		// 获取评论列表
		getCommentList() {
			this.loadStatus = 'loading';
			this.$H
				.get('comment/list', {
					post_id: this.postId,
					page: this.page
				})
				.then((res) => {
					if (res.code == 1) {
						this.commentList = this.commentList.concat(res.result.data);

						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					}
				});
		},
		//获取子级评论列表
		onCollapseComment(row) {
			this.$set(row, 'page', 1);
			this.$set(row, 'childrenList', []);

			this.getChildrenCommentList(row);
		},
		onMoreComment(row) {
			row.page++;
			this.getChildrenCommentList(row);
		},
		getChildrenCommentList(row) {
			this.$H
				.get('comment/getChildrenList', {
					parent_id: row.children.pid,
					page: row.page,
					frist_id: row.children.id
				})
				.then((res) => {
					this.$set(row, 'childrenList', row.childrenList.concat(res.result.data));

					if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
						this.$set(row, 'hasMore', false);
					} else {
						this.$set(row, 'hasMore', true);
					}
				});
		},
		jumpUser(userId) {
			uni.navigateTo({
				url: '/pages/user/home?user_id=' + userId
			});
		},
		addComment() {
			this.isSubmitD = true;
			if (this.form.content == '') {
				this.$u.toast('评论不能为空');
				this.isSubmitD = false;
				return;
			}

			uni.showLoading({
				mask: true,
				title: '发布中'
			});

			this.$H.post('comment/addComment', this.form).then((res) => {
				if (res.code == 1) {
					this.form.content = '';
					this.$u.toast('评论成功');
					this.page = 1;
					this.commentList = [];
					this.getCommentList();
				}
				this.isSubmitD = false;
				uni.hideLoading();
				this.isShowCommentInput = false;
			});
		},
		getPostDetail() {
			this.$H
				.get('post/detail', {
					id: this.postId
				})
				.then((res) => {
					if (res.result.media) {
						res.result.media.forEach((item, index) => {
							res.result.media[index] = this.$utils.imgPath(item);
						});
					}

					this.postDetail = res.result;
				});
		},
		onPostThumbCancel() {
			this.$H
				.post('post/thumbCancel', {
					id: this.postId
				})
				.then((res) => {
					if (res.code === 1) {
						this.postDetail.is_thumb = false;
						this.postDetail.thumb_num--;
					}
				});
		},
		onPostThumbAdd() {
			this.$H
				.post('post/thumbAdd', {
					id: this.postId,
					user_id: this.postDetail.user_id
				})
				.then((res) => {
					if (res.code === 1) {
						this.postDetail.is_thumb = true;
						this.postDetail.thumb_num++;
					}
				});
		},
		follow() {
			this.$H
				.post('user/addFollow', {
					user_id: this.postDetail.user_id
				})
				.then((res) => {
					if (res.code == 1) {
						this.postDetail.is_follow = true;
					}
				});
		},
		cancelFollow() {
			this.$H
				.post('user/cancelFollow', {
					user_id: this.postDetail.user_id
				})
				.then((res) => {
					if (res.code == 1) {
						this.postDetail.is_follow = false;
					}
				});
		},
		previewImage(e) {
			uni.previewImage({
				current: e.currentTarget.dataset.current, // 当前显示图片的http链接
				urls: e.currentTarget.dataset.image // 需要预览的图片http链接列表
			});
		},
		onKeyboardChange() {
			uni.onKeyboardHeightChange((res) => {
				this.toolStyle = {
					bottom: res.height + 'px'
				};
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.post-title {
	margin: 20rpx 0;
}

.icon text {
	font-size: 12px;
	color: #999;
	margin-right: 20rpx;
}

/*关注*/

.user-item {
	padding: 30rpx;
	display: flex;

	.avatar {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.btn {
		border: 1px solid #f5f5f5;
		border-radius: 50rpx;
		font-size: 20rpx;
		margin-left: auto;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		line-height: 1;
		padding: 10rpx 20rpx;
	}
}

// 分享弹窗
.share-wrap {
	display: flex;
	padding: 30rpx;
	width: 60%;
	margin: 0 auto;

	.share-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&:nth-child(1) {
			margin-right: auto;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		text {
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}
}

//海报弹窗
.canvas-box {
	height: 560px;
	position: relative;

	.footer {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
	}
}

.expire-box {
	background-color: #999;
	color: #fff;
	font-size: 24rpx;
	display: inline-block;
	padding: 0 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

// 轮播图指示器
.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}

.post-content-wrap {
	padding: 30rpx;

	.discuss-item {
		display: inline-block;
		color: #2b85e4;
	}
}

.fab-wrap {
	position: fixed;
	right: 30rpx;
	bottom: 200rpx;

	.fab-item {
		background-color: $u-primary;
		color: #fff;
		font-size: 24rpx;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 100rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
	}
}

.tool-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 30rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
	border-top: 1px solid #f5f5f5;
	background-color: #fff;
	z-index: 11;

	.input-wrap {
		width: 100%;
	}

	.input-tips {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #eee;
		border-radius: 100rpx;
		font-size: 24rpx;
		padding: 10rpx 40rpx;
		color: #616161;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	.num-wrap {
		display: flex;
		align-items: center;
		margin: 0 30rpx;

		.num {
			font-size: 24rpx;
			margin-left: 5rpx;
		}
	}

	.comment-input {
		background-color: #f5f5f5;
		border-radius: 20rpx;
		width: calc(100% - 40rpx);
		font-size: 28rpx;
		padding: 20rpx;
	}
}

// 评论列表
.comment-item {
	display: flex;
	font-size: 28rpx;
	padding: 20rpx;

	&:active {
		background-color: #f5f5f5;
	}

	.avatar-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	&_right {
		flex: 1;
		line-height: 1.8;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
		.nickname {
			margin-bottom: 10rpx;
			color: #999;
		}

		.time-desc {
			font-size: 20rpx;
			color: #999;
		}
	}

	.thumb-wrap {
		margin-left: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
		color: #616161;
	}
}

.children-comment-item {
	padding: 20rpx;
	margin-left: 90rpx;

	.avatar-img {
		width: 40rpx;
		height: 40rpx;
	}

	.comment-item_right {
		border-bottom: unset;
		.nickname {
			line-height: 1;
		}
	}
}

.collapse {
	color: dodgerblue;
}

// 圈子信息
.topic-info {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	background-color: #f5f5f5;
	margin: 30rpx;
	padding: 20rpx;
	border-radius: 20rpx;

	.cover {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.center {
		flex: 1;

		.count-txt {
			color: #999;
		}
	}

	.right {
		margin-left: 20rpx;
		background-color: $themes-color;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		color: #fff;
	}
}
</style>
